<template>
  <div class="addDynamic">
    <div class="addDynamic-inner">
      <div class="title">发布动态
        <i @click="closeFn"></i>
      </div>
      <div class="form">
        <el-form ref="dynamicForm" :rules="rules" :model="dynamicForm" label-width="111px" class="demo-ruleForm" >
          <el-form-item label="所属项目" prop="projectId">
            <el-select placeholder="请选择" v-model="dynamicForm.projectId" @change="projectId_change">
              <el-option v-for='(item ,index) in project_list' :label="item.shortName" :value="item.projectId==null?0:item.projectId"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="里程碑" prop="planId">
            <el-select placeholder="请选择" v-model="dynamicForm.planId" :disabled="planId_disabled">
              <el-option v-for='(item ,index) in milepost_list' :label="item.name" :value="item.planId"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="动态内容" prop="content">
            <el-input type="textarea" v-model="dynamicForm.content" placeholder="请输入项目简介"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="annex-list">
              <vuescroll :ops="ops">
                <ul>
                  <li class="add-annex" @click="addAnnexFn">
                    <i class="add"></i>
                    添加附件
                  </li>
                  <li class="add-annex" v-for="(item,index) in dynamicForm.upload_picture_list" :key="'img'+index">
                    <div class="img" :style="{backgroundImage: 'url(' + item.url + ')' }"></div>
                    <i class="icon-del" @click="delAnnexImg(index)"></i>
                  </li>
                  <li class="add-annex" v-for="(item,index) in dynamicForm.upload_video_list" :key="'video'+index">
                    <i class="video-icon"></i>
                    {{item.name}}
                    <i class="icon-del" @click="delAnnexVideo(index)"></i>
                  </li>
                  <li class="add-annex" v-for="(item,index) in dynamicForm.upload_file_list" :key="'file'+index">
                    <i :class="item.type"></i>
                    {{item.name}}
                    <i class="icon-del" @click="delAnnexFile(index)"></i>
                  </li>
                </ul>
              </vuescroll>
            </div>
            <input ref="upload-file" @change="choose_verify_file" type="file" style="display: none" multiple/>
          </el-form-item>
          <div class="save-btn" @click="saveFn">发布</div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'

  export default {
    name: "AddDynamic",
    components: {
      vuescroll
    },
    data() {
      return {
        project_list: [],//项目列表
        milepost_list: [],//里程碑列表
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '30px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        dynamicForm: {
          upload_picture_list: [],//图片列表
          upload_video_list: [],//视频列表
          upload_file_list: [],//附件列表
        },
        rules: {
          projectId: [
            {required: true, message: '请选择项目', trigger: 'change'},
          ],
          content: [
            {required: true, message: '请输入动态内容', trigger: 'blur'},
          ],
          // planId: [
          //   {required: true, message: '请选择里程碑', trigger: 'change'},
          // ],
        },
        planId_disabled:true,
      }
    },
    created() {
      this.get_project_list();
    },
    methods: {
      projectId_change(){
        this.planId_disabled=false;
        this.get_milepost_list();
      },
      //查询项目列表
      get_project_list() {
        this.$http.get('project/project/search/list',{
          params:{
            pageNum: 1,
            pageSize: 200,
            userId: this.$store.state.userInfo.userId,
            companyId: this.$store.state.userInfo.companyId,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.project_list = res.data||[];
          } else {
            this.$message.error(res.statusMsg)
          }
        })
      },
      //查询里程碑
      get_milepost_list() {
      this.$http.get('plan/project/plan/list',{params:{
          projectId:this.dynamicForm.projectId
        }}).then(res=>{
          if(res.statusCode==200){
            this.milepost_list=res.data;
          }else {
            this.$message.error(res.statusMsg);
          }
      })
      },
      //关闭
      closeFn() {
        this.$emit("close");
      },
      //
      choose_verify_file() {
        let _this = this,
          upload_file = _this.$refs['upload-file'],
          file_list = upload_file.files;
        for (let item of file_list) {
          //判断是否为付费用户
          if (_this.$store.state.userInfo.payUser != true) {
            if (item.type.indexOf('image') == -1) {
              _this.$message.error("此功能是高级版专有，请联系商务升级版本，谢谢");
              return;
            }
          }
          let list_length = 1;//文件个数
          //判断文件大小
          if (item.size > _this.upload_file_max_size) {
            _this.$message.error('文件：' + item.name + '太大了，请选择2M以下的附件重新上传');
            continue;
          }

          if (item.type.indexOf('image') !== -1) {
            //文件类型为图片
            list_length += _this.dynamicForm.upload_picture_list.length;
            if (list_length > 9) {
              _this.$message.error('图片只能上传9个以内，请删除后再上传');
              continue;
            }
            _this.dynamicForm.upload_picture_list.push({
              'file': item,
              'url': window.URL.createObjectURL(item),
              'name': (item.name || '').intercept_characters()
            });
            console.log(_this.dynamicForm.upload_picture_list)
          } else if (item.type.indexOf('video') !== -1) {
            //文件类型为视频
            list_length += _this.dynamicForm.upload_video_list.length;
            if (list_length > 2) {
              _this.$message.error('视频只能上传2个以内，请删除后再上传');
              continue;
            }
            _this.dynamicForm.upload_video_list.push({
              'file': item,
              'url': window.URL.createObjectURL(item),
              'name': (item.name || '').intercept_characters()
            })
          } else {
            //文件类型为其他的
            list_length += _this.dynamicForm.upload_file_list.length;
            if (list_length > 5) {
              _this.$message.error('附件只能上传5个以内，请删除后再上传');
              continue;
            }
            let suffix_str = item.name.substr(item.name.length - 4, 4),
              _type = suffix_str.indexOf('doc') !== -1 ? 'word-icon' :
                (suffix_str.indexOf('xls') !== -1 ? 'xlsx-icon' : (
                  suffix_str.indexOf('ppt') !== -1 ? 'ppt-icon' : (
                    suffix_str.indexOf('txt') !== -1 ? 'txt-icon' : (
                      suffix_str.indexOf('pdf') !== -1 ? 'pdf-icon' : 'default-icon'
                    )
                  )));
            _this.dynamicForm.upload_file_list.push({
              'file': item,
              'url': window.URL.createObjectURL(item),
              'type': _type,
              'name': (item.name || '').intercept_characters()
            })
          }
        }
      },
      delAnnexImg(index) {
        this.dynamicForm.upload_picture_list.splice(index, 1);
      },
      delAnnexVideo(index) {
        this.dynamicForm.upload_video_list.splice(index, 1);
      },
      delAnnexFile(index) {
        this.dynamicForm.upload_file_list.splice(index, 1);
      },
      addAnnexFn() {
        let _this = this;
        this.$refs['upload-file'].click();
      },
      //发布
      saveFn() {
        let _this = this;
        this.$refs['dynamicForm'].validate((valid) => {
          if (valid) {
            let formdata = new FormData();
            formdata.append('createUserId', _this.$store.state.userInfo.userId);//创建任务的人的id 指派人id
            formdata.append('content', _this.dynamicForm.content);
            formdata.append('projectId', _this.dynamicForm.projectId);
            formdata.append('planId', _this.dynamicForm.planId||'');
            if(this.dynamicForm.upload_picture_list.length&&this.dynamicForm.upload_picture_list.length>0){
              this.dynamicForm.upload_picture_list.map(function (item) {
                formdata.append('photo', item.file, item.name);
              });
            }
            if(this.dynamicForm.upload_file_list.length&&this.dynamicForm.upload_file_list.length>0){
              this.dynamicForm.upload_file_list.map(function (item) {
                formdata.append('file', item.file, item.name);
              });
            }
            if(this.dynamicForm.upload_video_list.length&&this.dynamicForm.upload_video_list.length>0){
              this.dynamicForm.upload_video_list.map(function (item) {
                formdata.append('video', item.file, item.name);
              });
            }
            _this.$http.post('plan/dynamic/insert', formdata).then(res => {
              if (res.statusCode == 200) {
                _this.$message.success('发布成功');
                _this.closeFn();
                _this.$emit('update');
              } else {
                _this.$message.error(res.statusMsg);
              }
            })
          } else {
            return false
          }
        });
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .addDynamic {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 1000;

    .addDynamic-inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 608px;
      height: 700px;
      background-color: #ffffff;
      border-radius: 6px;
      padding: 0 32px;

      > .title {
        padding-top: 35px;
        padding-bottom: 30px;
        color: #454A55;
        font-size: 16px;
        font-weight: bold;

        i {
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          background-image: url("../../assets/img/close_icon.png");
          top: 32px;
          right: 32px;
          cursor: pointer;
        }
      }

      > .form {
        .el-form-item__label {
          padding-right: 16px;
        }

        .cancel-btn, .save-btn {
          display: inline-block;
          border-radius: 6px;
          width: 88px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
        }

        .save-btn {
          background-color: #0755db;
          color: #FFFFFF;
          position: absolute;
          bottom: 24px;
          right: 65px;
        }

        .cancel-btn {
          color: #b3c0c9;
        }

        .add-manager {
          position: absolute;
          width: 38px;
          height: 38px;
          background-image: url("../../assets/img/project/add_manager_icon1.png");
          background-size: 38px 38px;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
        }

        .select-manager {
          padding-left: 50px;
        }

        .add-manager:hover {
          background-image: url("../../assets/img/project/add_manager_icon2.png");
        }

        .annex-list {
          height: 280px;
          padding: 10px 0;

          ul {
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;

            li {
              width: 100px;
              height: 100px;
              border: 1px solid #EEEEEE;
              text-align: center;
              font-size: 12px;
              padding-top: 50px;
              box-sizing: border-box;
              color: #96A2AA;
              position: relative;
              margin: 0 16px 16px 0;
              /*border-radius: 6px;*/
              white-space: nowrap;

              i {
                position: absolute;
                width: 20px;
                height: 20px;
                top: 30px;
                left: 40px;
                background-image: url("../../assets/img/annex/ic_ty.png");
              }

              i.add {
                background-image: url("../../assets/img/annex/ic_add.png");
              }

              i.word-icon {
                background-image: url("../../assets/img/annex/ic_word.png");
              }

              i.pdf-icon {
                background-image: url("../../assets/img/annex/ic_pdf.png");
              }

              i.txt-icon {
                background-image: url("../../assets/img/annex/ic_txt.png");
              }

              i.xlsx-icon {
                background-image: url("../../assets/img/annex/ic_excel.png");
              }

              i.ppt-icon {
                background-image: url("../../assets/img/annex/ic_ppt.png");
              }

              i.video-icon {
                background-image: url("../../assets/img/annex/ic_video.png");
              }

              i.icon-del {
                background-image: url("../../assets/img/annex/ic_delete.png");
                width: 16px;
                height: 16px;
                position: absolute;
                left: 90px;
                top: -5px;
              }
            }

            .add-annex {
              cursor: pointer;
              position: relative;

              > .img {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100px;
                height: 100px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                /*border-radius: 6px;*/
              }
            }
          }

        }
      }
    }
  }
</style>
<style scoped type="text/scss" lang="scss">
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
<style lang="scss" type="text/scss">
  .form {
    .el-form-item__label {
      padding-right: 16px;
    }

    .el-input__inner, .el-textarea__inner {
      width: 400px;
      background-color: #f2f6f9;
      border-color: #f2f6f9;
    }

    .el-textarea__inner {
      height: 96px;
    }

    .el-date-editor--date, .el-date-editor--time {
      .el-input__inner {
        width: 176px;
      }
    }

    .el-input__inner:focus, .el-textarea__inner:focus {
      background-color: #FFFFFF;
      border-color: #0755db;
    }

    .line-time {
      width: 20px;
    }
  }
</style>
